<template>
    <div class="outin">
        <p class="left">
            <span class="top">本月收入</span>
            <span class="bottom">{{ outs }}</span>
        </p>
        <p class="right">
            <span class="top">本月支出</span>
            <span class="bottom">{{ ins }}</span>
        </p>
    </div>
</template>


<script>
export default {
    props: {
        outs: {
            type: Number,
            default: 0
        },
        ins: {
            type: Number,
            default: 0
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../style/vars.scss"; 
.outin {
    height: 60px;
    text-align: center;
    display: flex;
    justify-content: center; // 设置内容居中
    background: $background-color10;
    color: #fff;
    font-weight: bold;
    p {
        flex: 1;
        display: flex;
        flex-direction: column; // 设置轴方向
        span {
            flex: 1;
        }
    }
}   
</style>